<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .content {
      float: left;
      width: 100%;
    }
    .left {
      float: left;
      width: 190px;
      margin-left: -100%;
      position: relative;
      left: -190px;
      background-color: gray;
    }
    .right {
      float: left;
      width: 230px;
      margin-left: -230px;
      position: relative;
      right: -230px;
      background-color: gray;
    }
    #body-content {
      padding: 0 230px 0 190px;
    }
    img{position:relative;
      top:5px;height:150px;width:150px;
    }
  </style>
</head>
<body>
<div id="body-content">
  <div class="content">Three columns. One fixed-width sidebar for your navigation,
    another for, say, yourGoogle Ads or your Flickr photos- -and,
    as in a fancy truffle, a liquid center for the real substance.
    Its wide applicability in this golden age of blogging, along with its
    considerable difficulty, is what has earned the layout the title of Holy Grail.
  </div>
  <div class="left"><img src="蓝天白云.jpeg"><br/>body-left</div>
  <div class="right"><img src="绿草茵茵.jpeg"><br/>body-right</div>
</div>
</body>
</html>